<template>
	<vie class="detail">
		<view class="person">
			<view class="img"><img src="../../static/章若楠.png"></view>
			<view class="text">
				<view style="font-size:20px;font-weight:600;">橘子果酱</view>
				<view style="font-size:14px;font-weight:520;">女</view>
				<view style="font-size:14px;font-weight:520;">学号：12345</view>
			</view>
			<view class="icon"></view>
		</view>
		<view class="top">
			<view class="main">
				<view style="margin-bottom: 2px;display:flex;">
					<view style="margin-top:-2px;"> <img src="../../static/时间.png" style="width:20px;height:20px;">
					</view>4月11日 周六
					16:30-18:30
				</view>
				<view style="display:flex;">
					<view style="margin-left:-2px;"><img src="../../static/位置.png" style="width:23px;height:23px;">
					</view>
					风雨球场
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>女生，男生
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>希望有高手可以带
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/关注.png" style="width:20px;height:20px;"></view>2/4&nbsp;人已参与
				</view>
			</view>

		</view>

		<view class="main">
			<view class="center">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<input type="text" placeholder="说点什么">
					</view>
					<view v-if="current === 1">
						<input type="text" placeholder="说点什么">
					</view>

				</view>
			</view>
		</view>

		<view class="bottom">
			<view style="margin-top: -3px;display:flex;">
				<view><img src="../../static/消息.png" style="width:20px;height:20px;"></view>群聊
			</view>
			<view class="button">
				<view>我要组队</view>
			</view>
		</view>
		</view>
	</vie>

</template>

<script>
	export default {
		data() {

			return {
				items: ['搭帖评论', '搭子评价'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				// colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'

			};
		},
		created() {

		},
		watch: {


		},
		mounted() {

		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

		}
	};
</script>
<style lang="scss">
	.detail {
		.person {
			width: 390px;
			height: 90px;
			// border-bottom: #a1a1a1 solid 1.5px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.img {
				width: 80px;
				height: 80px;
				border-radius: 15px;

				// position: absolute;
				// left: 30px;
				// top: 5px;
				overflow: hidden;
				/* 防止图片超出盒子范围 */
			}

			.img img {
				width: 100%;
				/* 图片宽度占满父容器 */
				height: 100%;
				/* 图片高度占满父容器 */
				object-fit: cover;
				/* 保持图片比例并裁剪多余部分 */
				border-radius: 15px;
				/* 图片圆角与父容器一致 */
			}

			.text {
				width: 200px;
				height: 30px;
				background-color: #aaaaff;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.top {
			width: 390px;
			height: 200px;
			// background-color: #aaaaff;
			padding: 30px;


			.main {
				width: 300px;
				height: 200px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}
		}

		.main {
			width: 390px;
			height: 100px;
			// background-color: #00aaff;

			.uni-padding-wrap {
				// width: 750rpx;
				padding: 0px 30px;
			}

			.content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				height: 150px;
				text-align: center;

				input {
					width: 300px;
					height: 30px;
					border: #a1a1a1 solid 1.5px;
					margin-top: -60px;
					text-align: left;
					padding-left: 10px;
					border-radius: 10px;
				}
			}
		}

		.bottom {
			width: 390px;
			height: 70px;
			border-top: #636363 solid 1.5px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.button {
				width: 100px;
				height: 40px;
				background-color: #00aaff;
				color: #fff;
				border-radius: 15px;
				text-align: center;
				line-height: 40px;
				margin-left: 80px;
			}
		}
	}
</style>